<template>
  <div class="market-email">
    <!--总览-->
    <ul class="preview">
      <li>
        <h1>{{info.sendCount}}</h1>
        <p>发送总量</p>
      </li>
      <li>
        <h1>{{info.succeedSendCountRate}}</h1>
        <p>已送达</p>
      </li>
      <li>
        <h1>{{info.openCountRate}}</h1>
        <p>已打开</p>
      </li>
      <li>
        <h1>{{info.clickCountRate}}</h1>
        <p>已点击</p>
      </li>
    </ul>
    <!--图表展示-->
    <el-select  size="small" style="float: right;z-index: 999;width: 110px"
                v-model="year"  @change="getEchart">
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <div class="echart" id="myEchartEmail"></div>
    <!-- 列表展示-->
    <el-table :data="tableData" >
      <el-table-column  label="规则名称">
        <template slot-scope="scope">
          <router-link  style="color: #2A97F9;cursor: pointer" :to="{path:`/automation/marketStatic/emailDetail/${scope.row.id}`}"   class="more" :title="scope.row.name">
            [{{scope.row.ruleName}}]
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="sendStatusName" label="状态"></el-table-column>
      <el-table-column prop="sendCount" label="发送量(封)"></el-table-column>
      <el-table-column prop="succeedSendCount" label="已送达">
        <template slot-scope="scope">
          {{scope.row.succeedSendCount}} ({{scope.row.succeedSendCountRate}})
        </template>
      </el-table-column>
      <el-table-column prop="openCount" label="打开数">
        <template slot-scope="scope">
          {{scope.row.openCount}} ({{scope.row.openCountRate}})
        </template>
      </el-table-column>
      <el-table-column prop="clickCount" label="点击数">
        <template slot-scope="scope">
          {{scope.row.clickCount}} ({{scope.row.clickCountRate}})
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>
    <el-pagination align="right" style="margin-top: 15px" v-show="total>0"
                   @size-change="handleSizeChange" background
                   @current-change="handleCurrentChange"
                   :current-page.sync="nowPage"
                   :page-size="nowSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
    import {getEmailStaticDetail,getEmailEchart,getEmailList} from '@/api/marketStatic/email'

    export default {
        name: "EmailComponent",
        data() {
            return {
                tableData: [],
                nowPage: 1,
                nowSize: 10,
                total: 0,
                info:{
                    sendCount:0,succeedSendCountRate:'0.00%',openCountRate:'0.00%',clickCountRate:'0.00%'
                },
                year:new Date().getFullYear(),
                options:[new Date().getFullYear(),2019,2018,2017,2016,2015],
                query:''
            }
        },
        mounted() {
            this.getData();//获取统计数据
            this.getEchart();//获取图表数据
            this.getList();//获取表格数据
        },
        methods: {
            search(query){
                this.nowPage=1;
                this.query=query;
                this.getData();//获取统计数据
                this.getEchart();//获取图表数据
                this.getList();//获取表格数据
            },
            getList(){//获取表格数据
                getEmailList({size:this.nowSize,current:this.nowPage,query:this.query}).then(res => {
                    if(res.data.success){
                        this.tableData = res.data.data.records;
                        this.total = res.data.data.total
                    }
                })
            },
            getData() {
                getEmailStaticDetail({query:this.query}).then(res => {
                    if(res.data.success){
                        this.info = res.data.data;
                    }
                })
            },
            //获取echart数据
            getEchart() {
                getEmailEchart({year:this.year,query:this.query}).then(res => {
                    if(res.data.success){
                        let result =res.data.data;
                        let month=[],sendCount=[],succeedSendCount=[],openCount=[],clickCount=[];
                        result.map(item=>{
                            month.push(item.month);
                            sendCount.push(item.sendCount);
                            succeedSendCount.push(item.succeedSendCount);
                            openCount.push(item.openCount);
                            clickCount.push(item.clickCount);
                        })
                        let option = {
                            title: {
                                text: '统计图表',
                                textStyle: {
                                    fontWeight: 'normal'
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                left:'7%',
                                data: ['实发数', '送达数','打开数','点击数']
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: 'category',
                                    data: month
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    max: Math.max.apply(null, sendCount)<5?5:Math.max.apply(null, sendCount),//最大值处理
                                    axisLabel: {
                                        formatter: (value,index)=>{
                                            return parseInt(value)
                                        }
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: '实发数',
                                    type: 'bar',
                                    data:sendCount,
                                    itemStyle: {color: '#C7DCD4'}
                                },
                                {
                                    name: '送达数',
                                    type: 'bar',
                                    data: succeedSendCount,
                                    itemStyle: {color: '#D9ECF2'}
                                },
                                {
                                    name: '打开数',
                                    type: 'bar',
                                    data: openCount,
                                    itemStyle: {color: '#B4D1E1'}
                                },
                                {
                                    name: '点击数',
                                    type: 'bar',
                                    data: clickCount,
                                    itemStyle: {color: '#FCD9DD'}
                                }

                            ]
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartEmail'));
                        this.myChart.setOption(option)
                    }
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.nowSize = size
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.getList()
            }
        }

    }
</script>

<style scoped lang="scss">
  .market-email {
    .preview {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px !important;

      li {
        background-size: 100% 100%;
        width: 17%;
        background: url('../../../../public/img/bg1.png') no-repeat;
        background-size: 100% 100%;
        padding: 25px 3%;
        color: #325893;
        h1 {
          font-size: 28px;
          margin-bottom: 30px;
        }

        p {
          font-size: 16px;
        }
      }
    }
    li:nth-child(2){
      background: url('../../../../public/img/bg2.png') no-repeat;
      background-size: 100% 100%;
    }
    li:nth-child(3){
      background: url('../../../../public/img/bg3.png') no-repeat;
      background-size: 100% 100%;
    }
    li:nth-child(4){
      background: url('../../../../public/img/bg4.png') no-repeat;
      background-size: 100% 100%;
    }
    .echart {
      width: 100%;
      height: 500px;
    }
    .el-table{
      font-size: 13px;
    }
  }
  @media screen and (min-width: 1800px) {
    .market-email .preview li{
      width: 15%;
    }
  }
</style>
